<template>
	<view class='container bg-w'>
		<view class="header uni-flex uni-row flex-between">
			<uni-nav-bar title="工作计划详情">
				<template slot='left'>
					<view class="flex width-100">
						<i class='iconfont iconfanhui' @click='goBack()'></i>
					</view>
				</template>
			</uni-nav-bar>
		</view>
		<view class="position-r-top">
			<uni-collapse accordion="true" >
				<uni-collapse-item :title="item.projectName" v-for="(item,index) in workPlanLists" :key="index" :open="false">
					<uni-list>
						<view>
							<uni-list-item class="" title="截止时间" :rightText="item.completedTime"></uni-list-item>
							<uni-list-item class="" title="子项总数" :rightText="item.subProjectCount.toString()"></uni-list-item>
							<uni-list-item class="" title="负责子项" :rightText="item.subProjectResponsibleCount.toString()"></uni-list-item>
							<uni-list-item class="" title="测点总数" :rightText="item.standardProCount.toString()"></uni-list-item>
						</view>
					</uni-list>
					<text class="prj-title">项目工序计划</text>
					<view class="uni-padding-wrap uni-common-mt">
						<view class="progress-box" v-for="(itemChild,childIndex) in plan" :key="childIndex">
							<view class="progress_category">
								<p class="progress_category_label">{{itemChild.title1}}
									<text v-if="childIndex==0">{{item.tasksCount}}</text>
									<text v-if="childIndex==1">{{item.tasksEveryDay}}</text>
									<text v-if="childIndex==2">{{item.tasksWeekly}}</text>
									<text v-if="childIndex==3">{{item.tasksPerMonth}}</text>
								</p>
								<canvas :canvas-id="'canvasArcbar'+index+childIndex" :id="'canvasArcbar'+index+childIndex" class="charts3" :style="{'width':cWidth3*pixelRatio+'px','height':cHeight3*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth3*(pixelRatio-1)/2+'px','margin-top':-cHeight3*(pixelRatio-1)/2+'px'}"></canvas>
								<p class="progress_category_label">{{itemChild.title2}}
									<text v-if="childIndex==0">{{item.completeTasksCount}}</text>
									<text v-if="childIndex==1">{{item.tasksEveryDayComplete}}</text>
									<text v-if="childIndex==2">{{item.tasksWeeklyComplete}}</text>
									<text v-if="childIndex==3">{{item.tasksPerMonthComplete}}</text>
								</p>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js'
	import { getWorkPlanDetail } from '@/common/api/WorkPlan.js'
	let _self;
	export default {
		data() {
			return {
				plan:[{
					title1:'总施工任务',
					title2:'累计完成任务',
				},{
					title1:'今日计划',
					title2:'今日完成任务',
				},{
					title1:'本周计划',
					title2:'本周完成任务',
				},{
					title1:'本月计划',
					title2:'本月完成任务',
				}],
				colors: ["#00009f", "#ff5500", "#e11a74", "#7000a8"],
				workPlanLists: [],
				pixelRatio: 1,
				arcbarData: {
					"series": []
				},
				canvasArcbar:null,
				page: {
					pageNo: 1,
					pageSize: 10,
					taskFlag:1,
				},
				total: 0,
				totalPage:0,
			}
		},
		onLoad(params) {
			_self = this;
			this.page.postType=params.postType;
			this.page.userId=params.userId;
			this.cWidth3 = uni.upx2px(190);
			this.cHeight3 = uni.upx2px(190);
			this.arcbarWidth = uni.upx2px(16);
			this.getArcbarData()
		},
		methods: {
			getArcbarData() {
				getWorkPlanDetail(this.page).then(res=>{
					if(res.code == 20000){
						this.totalPage = res.data.pages;
						this.total = res.data.total
						this.workPlanLists = this.workPlanLists.concat(res.data.records)
						this.workPlanLists.forEach((item,index)=>{
							let a=null,b=null,c=null,d=null;
							item.completeTasksCount = (item.completeTasksCount == null) ? 0 : item.completeTasksCount;
							item.tasksCount = (item.tasksCount == null) ? 0 : item.tasksCount;
							item.tasksEveryDayComplete = (item.tasksEveryDayComplete == null) ? 0 : item.tasksEveryDayComplete;
							item.tasksEveryDay = (item.tasksEveryDay == null) ? 0 : item.tasksEveryDay;
							item.tasksWeeklyComplete = (item.tasksWeeklyComplete == null) ? 0 : item.tasksWeeklyComplete;
							item.tasksWeekly = (item.tasksWeekly == null) ? 0 : item.tasksWeekly;
							item.tasksPerMonthComplete = (item.tasksPerMonthComplete == null) ? 0 : item.tasksPerMonthComplete;
							item.tasksPerMonth = (item.tasksPerMonth == null) ? 1 : item.tasksPerMonth;
							if(!item.completeTasksCount){
								a=0
							}else{
								a=Math.round(item.completeTasksCount/item.tasksCount * 100) / 100>1?1:Math.round(item.completeTasksCount/item.tasksCount * 100) / 100
							}
							if(!item.tasksEveryDayComplete){
								b=0
							}else{							
								b=Math.round(item.tasksEveryDayComplete/item.tasksEveryDay * 100) / 100>1?1:Math.round(item.tasksEveryDayComplete/item.tasksEveryDay * 100) / 100
							}
							if(!item.tasksWeeklyComplete){
								c=0
							}else{
								c=Math.round(item.tasksWeeklyComplete/item.tasksWeekly * 100) / 100>1?1:Math.round(item.tasksWeeklyComplete/item.tasksWeekly * 100) / 100
							}
							if(!item.tasksPerMonthComplete){
								d=0
							}else{
								d=Math.round(item.tasksPerMonthComplete/item.tasksPerMonth * 100) / 100>1?1:Math.round(item.tasksPerMonthComplete/item.tasksPerMonth * 100) / 100
							}
							item.plan=[a,b,c,d]
							item.plan.forEach((childItem,childIndex)=>{
								this.arcbarData.series = [],
								this.arcbarData.series.push(Object.assign({},
									{
										data: childItem
									},{
										color: this.colors[childIndex]
									}));
								this.showArcbar("canvasArcbar"+index+childIndex, this.arcbarData);
							})
						})
					}
				})
			},
			showArcbar(canvasId, chartData) {
				this.canvasArcbar=new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					title: {
						name: Math.round(chartData.series[0].data * 100) + '%',
						color: chartData.series[0].color,
						fontSize: 25 * _self.pixelRatio
					},
					subtitle: {
						name: chartData.series[0].name,
						color: '#666666',
						fontSize: 15 * _self.pixelRatio
					},
					extra: {
						arcbar: {
							type: 'circle', //整圆类型进度条图
							width: _self.arcbarWidth * _self.pixelRatio, //圆弧的宽度
							startAngle: 0.5 //整圆类型只需配置起始角度即可
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth3 * _self.pixelRatio,
					height: _self.cHeight3 * _self.pixelRatio,
					dataLabel: true,
				});
			},
			onReachBottom() { //上拉加载更多
				this.page.pageNo++
				if (this.page.pageNo <= this.totalPage) {
					this.getWorkPlanDetail();
				}
			},
			onPullDownRefresh(){//下拉刷新
				this.page.pageNo = 1;
				this.workPlanLists = [];
				this.getWorkPlanDetail();
				setTimeout(function () {
						uni.stopPullDownRefresh();
				}, 1000);
			},
		}
	}
</script>

<style lang="less" scoped>
.prj-title{
	display: block;
	position: relative;
	// width: 100%;
	height: 86rpx;
	line-height: 86rpx;
	padding-left: 40rpx;
	background: #fff;
	margin-top: 10rpx;
}
.prj-title:after{
	content: '';
	position: absolute;
	top: 50%;
	left: 2%;
	width: 10rpx;
	height: 30rpx;
	border-radius: 4rpx;
	transform: translateY(-50%);
	background-color: #6D6D6D;
}
.uni-padding-wrap{
	width: 100%;
	box-sizing: border-box;
	padding: 0 20rpx 40rpx;
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background: #fff;
	.progress-box{
		width: 46%;
		border-radius: 20rpx;
		box-shadow: 0 0 10rpx 4rpx #eee;
		padding: 10rpx;
		margin-bottom: 20rpx;
		// /deep/.uni-progress-bar{
		// 	border-radius: 6px;
		// 	overflow: hidden;
		// }
		// /deep/.uni-progress-inner-bar{
		// 	border-radius: 6px 0 0 6px;
		// }
		.progress_category{
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.progress_category_label{
				width: 100%;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
			}
			.progress_category_val{
				color: #000;
				padding: 20rpx;
			}
		}
	}
}
/deep/.uni-collapse-cell__title-text {
	text-indent: 20rpx;
}
	
/deep/.uni-collapse-cell__title-text::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 2%;
	width: 10rpx;
	height: 30rpx;
	border-radius: 4rpx;
	transform: translateY(-50%);
	background-color: #09AAE9;
}
/deep/.uni-collapse .uni-list-cell {
	padding-left: 0 !important;
}
/deep/.uni-collapse-cell--open{
	background-color: #fff;

}
/deep/.uni-collapse-cell{
	border-color: #F2F2F2;
}
</style>

<style>
	
</style>
